<template>
<div class="mbFooter">
  <div class="personal-header" style="background: rgb(28, 48, 89);" @click="signOut()"><router-link class="iconfont icon-edit" to="/login" >退出</router-link><img class="headImg" src="http://imagesrcdola.b0.upaiyun.com/images/user/dolaboy.jpg" alt="znx" width="100%" height="100%"><span class="name">znx</span></div>
  <div class="personalPanel pr">
    <div class="threeSilde-nav sticky">
      <router-link class="item" to='/mine/gameHistory' activeClass="active" exact>历史</router-link>
      <router-link class="item" to='/mine/collection' activeClass="active" exact>收藏</router-link>
      <router-link class="item" to='/mine/gamePresent' activeClass="active" exact>礼包</router-link>
      <div class="bar"></div>
    </div>
    <router-view/>
  </div>
</div>
</template>

<script>
import axios from "axios"
export default {
  name: 'Mine',
  methods: {
    signOut() {
      //alert()
      document.cookie="connect.sid";
      axios.get("/api/signout")
      .then((res)=>{
        console.log("登出")
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.personal-header {
    height: 1.7rem;
    color: #fff;
    background-size: cover;
    overflow: hidden;
}
.personal-header .icon-edit {
    display: block;
    font-size: 20px;
    text-align: right;
    margin-right: 0.14rem;
    margin-top: 0.14rem;
    color: #fff;
}
.personal-header .headImg {
    display: block;
    margin: 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 100%;
}
.personal-header .name {
    display: block;
    text-align: center;
    font-size: 14px;
    margin-top: 0.1rem;
}
.pr {
    position: relative;
}
.sticky {
    position: -webkit-sticky;
    position: sticky;
    z-index: 100;
    top: 0;
}
.threeSilde-nav {
    background: #fff;
    height: 0.4rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    border-bottom: 1px solid #ddd;
}
.threeSilde-nav .item {
    flex-grow: 1;
    line-height: 0.4rem;
    text-align: center;
}
.threeSilde-nav .bar {
    position: absolute;
    bottom: 0;
    left: 8.8%;
    width: 0.5rem;
    height: 0.04rem;
    background-color: #07b3ef;
    transition: 0.5s;
}
.item:nth-child(1).active~.bar{
  transform: translateX(0);
}
.item:nth-child(2).active~.bar{
  transform: translateX(218%);
}
.item:nth-child(3).active~.bar{
  transform: translateX(424%);
}

</style>
